<template>
  <!--
  查
    1：定义查询接口api
    2:导入api
    3:进入页面请求api获取数据
    4：存储并渲染
    5：接口与分页组件关联
       a:total存储绑定
       b:页码与页容量绑定到分页组件（双向绑定.sync）
       c:页码改变和页容量改变后要调用接口
  列表完善
    1：序号没有真实化
       使用自定义栏  (页码-1)*页容量+$index+1
    2：头像没有显示图片
    3：聘用形式没有转换成我们熟悉的内容
        将需要转义的数据写成枚举数据以便公共使用
        转换数据（依赖枚举数据规则进行转换）
          formatter：用于某一栏数据的转换，它return 什么该栏的数据就是什么
    4：状态也没有转换成我们熟悉的形式
        a:导入枚举数据
        b:绑定转换方法
        c:进行数据转换
    5：页容量持久化
        localstorage
       a:值改变了就存储
       b:初始值读取浏览器存储
  增：
    1：创建一个新增弹框组件
    2：导入注册在父组件内使用
    3：点击新增打开新增弹框组件
    4：完成新增弹框组件内的布局
    5：处理表单的数据
    6：完成表单验证
    7：定义新增api
    8:导入新增api
    9:点击确定在表单验证通过后调用api
    10:调用成功
        a:提示
        b:关闭弹框
        c：清空表单数据与验证
        d:刷新父级列表数据
  删
    1：绑定删除点击事件，点击事件弹出确定框
    2：定义删除api
    3:导入
    4：确定框点击确后调用删除api
    5:调用成功
      a:提示
      b:刷新列表数据
         页码>1  && 当前页的数据只有一条
         页码--
         或者 页码=1
         刷新列表

  导入
    1：创建一个导入的新页面
       创建页面所对应组件
       配制路由
       点击导入跳转
    2：完成内部布局
    3：拖入文件或者点击按钮实现excel解析
    4：解析完成调用接口添加跳转到员工页面

  导出
    1：点击导出按钮，获取所有用户列表数据
    2：将数据转换成导出所需要的格式
    3：使用导出插件实现导出

  详情：
     1：创建详情页面组件
     2：配制路由，需要传参
     3：点击跳转，同时传入员工的id
     4:布局

  前端口决：当你发现一个东西完全不会做，没办法下手时，往往都有插件

  点击头像生成二维码
   1：定义一个dialog弹框
   2：点击头像能打开弹框
   3：生成二维码
      a:安装 昨天已安装了
      b:导入qrcode
      c:定义容器,dialog内定义一个canvas
      d:打开弹框时生成二维码

   为帐号分配角色
      需要完成的东西：
        1：分配角色弹框
           a:创建一个角色弹框组件
           b:导入注册使用
           c:点击分配角色打开弹框
        2：角色列表
        3：当前帐号已有角色的回显
            a:拿到当前帐号所拥有角色的id集合
            b:将该id集合赋值给checkbox的v-model的值
        4：修改提交
            a:定义修改api
            b:导入api
            c:点击确定后调用api
            d:调用成功
               提示
               关闭弹框
               关闭弹框时清空已选择
               不需要刷新父级列表

 -->
  <div class="employees">
    <el-card>
      <div class="top">
        <div class="left">
          <i class="el-icon-info" />
          <span>共98条记录</span>
        </div>
        <div class="right">
          <el-button
            size="mini"
            type="danger"
            @click="exportExcel"
          >普通excel导出</el-button>
          <el-button size="mini" type="info">复杂表头excel导出</el-button>
          <el-button
            size="mini"
            type="success"
            @click="importClick"
          >excel导入</el-button>
          <el-button
            size="mini"
            type="primary"
            @click="addEvent"
          >新增员工</el-button>
        </div>
      </div>
    </el-card>
    <el-card style="margin-top: 20px">
      <el-table :data="list">
        <el-table-column label="序号" type="index">
          <template v-slot="{ $index }">
            <div>
              {{ (page.page - 1) * page.size + $index + 1 }}
            </div>
          </template>
        </el-table-column>
        <el-table-column prop="username" label="姓名" />
        <el-table-column prop="staffPhoto" label="头像">
          <template v-slot="{ row }">
            <div>
              <img
                v-imgerror
                class="img"
                :src="row.staffPhoto"
                alt=""
                @click="avatarClick(row.staffPhoto)"
              >
            </div>
          </template>
        </el-table-column>
        <el-table-column prop="mobile" label="手机号" />
        <el-table-column prop="workNumber" label="工号" />
        <el-table-column
          prop="formOfEmployment"
          label="聘用形式"
          :formatter="formatterFormof"
        />
        <el-table-column prop="formOfEmployment" label="过滤器转换">
          <template v-slot="{ row }">
            <div>
              {{ row.formOfEmployment | filterFormof }}
            </div>
          </template>
        </el-table-column>
        <el-table-column prop="formOfEmployment" label="自定义指令转换">
          <template v-slot="{ row }">
            <div v-changeFormof="row.formOfEmployment" />
          </template>
        </el-table-column>
        <el-table-column prop="formOfEmployment2" label="源头上转换" />
        <!-- 表格数据转换实际开发经常有：
               1：借助table组件内的formatter转换
               2：使用过滤器转换
                   定义
                      filters:{
                        过滤器方法名(参数){
                          return 值
                        }
                      }
                   使用
                      只能用于 {{}}和v-bind ,它内部不能直接使用this
                      {{实参 | 过滤器方法名}}
               3：使用自定义指令
               4：在数据源头上转换

         -->

        <el-table-column prop="departmentName" label="部门" />
        <el-table-column prop="timeOfEntry" label="入职时间">
          <template v-slot="{ row }">
            <div v-formatTime="row.timeOfEntry" />
          </template>
        </el-table-column>
        <el-table-column
          prop="enableState"
          :formatter="formatterState"
          label="状态"
        />
        <el-table-column label="操作" width="300px">
          <!-- 作用域插槽
                     默认插槽  v-slot="{参数}"
                     具名插槽  #名字="{参数}"
           -->
          <template v-slot="{ row }">
            <el-button
              type="text"
              @click="$router.push('/employees/detail/' + row.id)"
            >查看</el-button>
            <el-button type="text">转正</el-button>
            <el-button type="text">调岗</el-button>
            <el-button type="text">离职</el-button>
            <el-button type="text" @click="roleClick(row)">角色</el-button>
            <!-- <el-button
              v-showBtn="'employees_delbtn'"
              type="text"
              @click="delEvent(row.id)"
            >删除</el-button> -->
            <el-button
              v-if="showButton('employees_delbtn')"
              type="text"
              @click="delEvent(row.id)"
            >删除</el-button>
          </template>
        </el-table-column>
      </el-table>
      <div class="page">
        <!-- el-pagination
               @current-change:页码改变的回调
               @size-change:页容量改变的回调
               页容量的值一定要在页容量选项中存在
         -->
        <el-pagination
          :current-page.sync="page.page"
          :page-sizes="[1, 5, 10, 20, 50, 100, 200, 300, 400]"
          :page-size.sync="page.size"
          layout="total, sizes, prev, pager, next, jumper"
          :total="total"
          @current-change="pageChange"
          @size-change="sizeChange"
        />
      </div>
    </el-card>
    <!-- 新增弹框组件 -->
    <Add ref="add" @getData="getData" />
    <!-- 生成二维码弹框 -->
    <el-dialog title="图片二维码" :visible.sync="showQrcode">
      <div style="text-align: center">
        <canvas ref="canvas" />
      </div>
    </el-dialog>
    <!-- 分配角色弹框 -->
    <SetRole ref="setRole" />
  </div>
</template>
<script>
import { sysUser, sysUserDelete } from '@/api/employees'
import employeesData from '@/api/constant/employees'
import { export_json_to_excel } from '@/vendor/Export2Excel'
import Add from './components/add'
import moment from 'moment'
import Qrcode from 'qrcode'
import SetRole from './components/setRole'
function changeStr(dom, obj) {
  const findItem = employeesData.hireType.find((item) => item.id === +obj.value)
  dom.innerText = findItem ? findItem.value : '-'
}
export default {
  components: {
    Add,
    SetRole
  },
  directives: {
    changeFormof: {
      //  bind:类似beforeMount
      // inserted:类似mounted
      // update:更新时，不保证更新完成
      // componentUpdated:更新完成时，类似updated
      // unbind:类似destroyed
      inserted(dom, obj, vnode) {
        changeStr(dom, obj)
      },
      componentUpdated(dom, obj, vnode) {
        changeStr(dom, obj)
      }
    }
  },
  filters: {
    filterFormof(value) {
      const findItem = employeesData.hireType.find((item) => item.id === +value)
      return findItem ? findItem.value : '-'
    }
  },
  data() {
    return {
      list: [],
      page: {
        page: 1, // 页码
        size: +localStorage.getItem('employees_size') || 10 // 页容量
      },
      total: 100,
      showQrcode: false // 是否显示二维码弹框
    }
  },
  created() {
    this.getData()
  },
  methods: {
    async getData() {
      const res = await sysUser(this.page)
      // 存储数据

      res.data.rows.forEach((item) => {
        const findItem = employeesData.hireType.find(
          (item2) => item2.id === +item.formOfEmployment
        )
        item.formOfEmployment2 = findItem ? findItem.value : '-'
      })
      this.list = res.data.rows
      this.total = res.data.total
      // console.log('列表', res)
    },
    // 页码改变
    pageChange() {
      this.getData()
    },
    // 页容量改变
    sizeChange(size) {
      // 值改变了就存储到浏览器
      localStorage.setItem('employees_size', size)
      this.getData()
    },
    // 聘用形式数据转换
    formatterFormof(row, column, cellValue, index) {
      // console.log(row, column, cellValue, index)
      // 1：拿到枚举数据 :employeesData.hireType
      // 2：通过cellValue与id匹配到出对应项
      //   返回值=数组.find(item=>匹配)
      // 找到了  返回值=匹配到的项的item
      // 没找到  返回值=undefined
      const findItem = employeesData.hireType.find((item) => {
        return item.id === +cellValue
      })
      return findItem ? findItem.value : '-'
      // 3：return 对应项的value
    },
    formatterState(row, column, cellValue, index) {
      // 找出匹配项
      const findItem = employeesData.workingState.find(
        (item) => +item.id === cellValue
      )
      return findItem ? findItem.value : '-'
    },
    // 新增员工按钮点击事件
    addEvent() {
      // 打开新增弹框组件
      this.$refs.add.isShow = true
    },
    // 删除事件
    async delEvent(id) {
      // bug万能公式：不停的缩小范围
      await this.$confirm('您确定删除该项吗?', '提示', {
        confirmButtonText: '确定删除',
        cancelButtonText: '点错了',
        type: 'warning'
      })
      await sysUserDelete(id)
      this.$message.success('删除成功')
      if (this.page.page > 1 && this.list.length === 1) {
        this.page.page--
      }
      this.getData()
    },
    // 导入excel点击
    importClick() {
      this.$router.push('/employees/import')
    },
    // excel导出点击
    async exportExcel() {
      // 获取所有列表
      const res = await sysUser({
        page: 1,
        size: 9999999
      })
      const userList = res.data.rows
      // 表头
      const header = [
        '姓名',
        '头像',
        '手机号',
        '工号',
        '聘用形式',
        '部门',
        '入职时间',
        '状态'
      ]
      // 转换聘用形式与状态
      userList.forEach((item) => {
        const findItem = employeesData.hireType.find(
          (i) => i.id === +item.formOfEmployment
        )
        const findItem2 = employeesData.workingState.find(
          (i) => +i.id === +item.enableState
        )
        item.formOfEmployment = findItem ? findItem.value : '-'
        item.enableState = findItem2 ? findItem2.value : '-'
        item.timeOfEntry = moment(item.timeOfEntry).format('YYYY-MM-DD')
      })
      // 列表数据
      const data = userList.map((item) => {
        return [
          item.username,
          item.staffPhoto,
          item.mobile,
          item.workNumber,
          item.formOfEmployment,
          item.departmentName,
          item.timeOfEntry,
          item.enableState
        ]
      })
      // 生成excel
      export_json_to_excel({
        header,
        data,
        filename: '员工列表'
      })

      // console.log('获取所有列表', res)
    },
    // 点击头像生成二维码
    avatarClick(imgUrl) {
      if (!imgUrl) {
        return
      }
      console.log(imgUrl, 'imgUrl')
      // 打开弹框
      this.showQrcode = true
      // 生成二维码
      // $nextTick:作用：等到它前面的数据渲染完成(所有的同步处理完成)后执行内部回调方法
      this.$nextTick(() => {
        Qrcode.toCanvas(this.$refs.canvas, imgUrl, { width: 500 })
      })
    },
    // 角色点击
    roleClick(row) {
      console.log(row)
      // 打开分配角色弹框
      this.$refs.setRole.isShow = true
      // 获取角色列表
      this.$refs.setRole.getData()
      // 调用弹框组件内的获取角色数据的方法
      this.$refs.setRole.getUserRoleIds(row.id)
    }
  }
}
</script>
<style lang="scss" scoped>
.employees {
  padding: 15px;
  .top {
    display: flex;
    justify-content: space-between;
    align-items: center;
    .left {
      padding: 6px;
      border: 1px solid #bde6fe;
      background-color: #e6f7ff;
      .el-icon-info {
        color: #409eff;
        margin-right: 10px;
      }
    }
  }
  .page {
    padding-top: 30px;
    text-align: right;
  }
  .img {
    width: 50px;
    height: 50px;
  }
}
</style>
